<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>酒店详情</title>
		<script src="../src/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/flexible_css.debug.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/Details-hotel.css" />
		<link rel="stylesheet" type="text/css" href="../src/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="../src/font-4.7/css/font-awesome.css" />
		<!--[if lt IE 9]>
	        <script src="../src/html5shiv.min.js"></script>
			<script src="../src/respond.min.js"></script>
	    <![endif]-->
	</head>

	<body>
		<script src="../src/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/Details-hotel.js"></script>
		<section class="login">
			<figure class="h-left">
				<i class="fa fa-angle-left"></i>
			</figure>
			<figure class="h-right">
				<div class="address">
					<i class="fa fa-user-circle-o"></i>
				</div>
				<div class="payment">
					<i class="fa fa-archive"></i>
				</div>
			</figure>
		</section>
		<header class="header">
			<section class="h-banner">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="../img/Details/banner-img-1.jpg">
						</div>
						<div class="swiper-slide">
							<img src="../img/Details/banner-img-2.jpg">
						</div>
						<div class="swiper-slide">
							<img src="../img/Details/banner-img-3.jpg">
						</div>
						<div class="swiper-slide">
							<img src="../img/Details/banner-img-4.jpg">
						</div>
						<div class="swiper-slide">
							<img src="../img/Details/banner-img-5.jpg">
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</section>
		</header>
		<main class="main">
			<section class="swiper-container-information">
				<section class="m-nav">
					<figure class="active">全日房</figure>
					<figure>钟点房</figure>
				</section>
				<section class="swiper-wrapper">
					<figure class="swiper-slide list">
						<div class="opts-screen">
							<ul>
								<li>
									<label><i class="fa fa-map-marker"></i></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
									<dl>
										<dt><img src="../img/Details/dinweimap.png"/></dt>
										<dd>我的位置</dd>
									</dl>
								</li>
								<li>
									<label><i class="fa fa-calendar"></i></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
								</li>
								<li>
									<label><i class="fa fa-search"></i></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
								</li>
								<li>
									<label><img src="../img/Details/money.png"/></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
								</li>
								<li>
									<label><img src="../img/Details/map-img.png"/></label><button class="search-btn">开始搜索</button>
								</li>
							</ul>
							<div class="Prompt">
								<div class="pro-left">
									<span>浏览&收藏</span>
									<p>您还为浏览过酒店哦，快去搜索吧</p>
								</div>
								<div class="pro-right">
									<span>全部<i class="fa fa-angle-right"></i></span>
								</div>
							</div>
						</div>
						<div class="opts-bottom">
							<p class="Reminder"><img src="../img/Details/wenxin-bg.png"/>全程预定保障，去哪都放心</p>
							<div class="opts-contain-list">
								<h4 class="contain-title"><img src="../img/Details/zan-img.png"/>超值折扣<span>10家<i class="fa fa-angle-right"></i></span></h4>
								<div class="content">
									<dl>
										<dt>
											<img src="../img/Details/imgs (2).png"/>
										</dt>
										<dd>
											<h4>北京稀客空间公寓世贸天阶店</h4>
											<p>距您34.3公里，在东大123456</p>
										</dd>
									</dl>
									<dl>
										<dt>
											<img src="../img/Details/imgs (3).png"/>
										</dt>
										<dd>
											<h4>北京稀客空间公寓世贸天阶店</h4>
											<p>距您34.3公里，在东大123456</p>
										</dd>
									</dl>
									<dl>
										<dt>
											<img src="../img/Details/imgs (4).png"/>
										</dt>
										<dd>
											<h4>北京稀客空间公寓世贸天阶店</h4>
											<p>距您34.3公里，在东大123456</p>
										</dd>
									</dl>
									<dl>
										<dt>
											<img src="../img/Details/imgs (5).png"/>
										</dt>
										<dd>
											<h4>北京稀客空间公寓世贸天阶店</h4>
											<p>距您34.3公里，在东大123456</p>
										</dd>
									</dl>
								</div>		
							</div>
							<div class="opts-contain-sel">
								<h4>学生特权</h4>
								<img src="../img/Details/imgs (6).png"/>
								<p>只想学生开放的价格，绝对低价，就等你来</p>
							</div>
							<div class="opts-contain-sel">
								<h4>带你看山大海</h4>
								<img src="../img/Details/imgs (7).png"/>
								<p>避暑圣地1元起</p>
							</div>
							<div class="opts-contain-sel">
								<h4>酒店特卖会 ，1元开抢</h4>
								<img src="../img/Details/imgs (8).png"/>
								<p>全国2000+酒店，1元起订，速速来抢！</p>
							</div>
							<div class="opts-contain-sel">
								<h4>1000+酒店免费试</h4>
								<img src="../img/Details/imgs-(14).png"/>
								<p>写500字图文点评，即可报销全额房费</p>
							</div>
						</div>
					</figure>
					<figure class="swiper-slide list">
						<div class="opts-screen">
							<ul>
								<li>
									<label><i class="fa fa-map-marker"></i></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
									<dl>
										<dt><img src="../img/Details/dinweimap.png"/></dt>
										<dd>我的位置</dd>
									</dl>
								</li>
								<li>
									<label><i class="fa fa-calendar"></i></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
								</li>
								<li>
									<label><i class="fa fa-search"></i></label><input type="text"/>
									<span><i class="fa fa-angle-right"></i></span>
								</li>
								<li>
									<button class="search-btn">开始搜索</button>
								</li>
							</ul>
							<div class="Prompt">
								<div class="pro-left">
									<span>浏览&收藏</span>
									<p>您还为浏览过酒店哦，快去搜索吧</p>
								</div>
								<div class="pro-right">
									<span>全部<i class="fa fa-angle-right"></i></span>
								</div>
							</div>
						</div>
						<div class="opts-bottom">
							<p class="Reminder"><img src="../img/Details/wenxin-bg.png"/>全程预定保障，去哪都放心</p>
						</div>
					</figure>
				</section>
			</section>
			<div class="foot-banner">
				<img src="../img/Details/imgs (9).png"/>
			</div>
		</main>
		<footer class="footer">
			<dl>
				<dt>
					<img src="../img/Details/imgs (10).png"/>
				</dt>
				<dd>今日特惠</dd>
			</dl>
			<dl>
				<dt>
					<img src="../img/Details/imgs (11).png"/>
				</dt>
				<dd>品牌连锁</dd>
			</dl>
			<dl>
				<dt>
					<img src="../img/Details/imgs (12).png"/>
				</dt>
				<dd>严选酒店</dd>
			</dl>
			<dl>
				<dt>
					<img src="../img/Details/imgs (13).png"/>
				</dt>
				<dd>会场预定</dd>
			</dl>
		</footer>
	</body>

</html>